<template>
  <el-card class="card" shadow="never">
    <span class="header" slot="header">
      <section class="header-left">
        {{ title || this.$route.meta.title }}
        <slot name="title"></slot>
        <slot name="cLeft"></slot>
      </section>
      <section class="header-right">
        <slot name="cRight"></slot>
      </section>
    </span>
    <slot />
  </el-card>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: null
    }
  }
}
</script>

<style lang="scss" scoped>
.card {
  margin-bottom: 20px;
  .header {
    display: flex;
    justify-content: space-between;
    align-content: center;
    .header-left {
      display: flex;
      align-items: center;
    }
    .header-right {
      display: flex;
      align-items: center;
    }
  }
}
</style>
